<template>
   <div>
       <!--面包屑-->
           <el-breadcrumb separator="/">
               <el-breadcrumb-item :to="{ path: '/layout/message' }">消息界面</el-breadcrumb-item>
               <el-breadcrumb-item>邮箱</el-breadcrumb-item>
               <el-breadcrumb-item>邮箱内容</el-breadcrumb-item>
           </el-breadcrumb>
       <!--表格-->
       <el-table :data="tableData" style="width: 100%">
           <el-table-column prop="id" label="ID" width="60" />
           <el-table-column prop="sendM" label="邮箱信息" width="1200" />
           <el-table-column label="操作" width="120" >
               <template #default="scope">
                   <el-button
                           size="default"
                           type="danger"
                           @click="handleDelete(scope.$index, scope.row)"
                   >删除</el-button
                   >
               </template>
           </el-table-column>
       </el-table>
   </div>
</template>

<script>
    import api from "../../api";
    import {reactive,toRefs,onMounted} from 'vue'
    import {ElMessage, ElMessageBox} from 'element-plus'
    export default {
        name: "Email",
        setup(){
            let data=reactive({
                tableData:[]
            })
            onMounted(()=>{
                getEmailList()
            })
            // 获取邮箱信息
            let getEmailList=()=>{
                api.getMessageEmail().then(res=>{
                   if (res.data.status===200){
                       data.tableData=res.data.data
                   }else {
                       ElMessage.error('获取邮箱信息失败')
                   }
                })
            }
            // 删除邮箱信息
            let handleDelete=(index,row)=>{
                // console.log(index,row)
                ElMessageBox.confirm(
                    '是否永久删除',
                    '警告',
                    {
                        confirmButtonText: '删除',
                        cancelButtonText: '取消',
                        type: 'warning',
                    }
                ).then(() => {
                    api.getEmailDelete({id:row.id}).then(res=>{
                        if (res.data.status===200){
                            ElMessage.success('删除成功')
                        }
                        getEmailList()
                    })
                })
                    .catch(() => {
                        ElMessage.info('取消成功')
                    })
            }
            return{
                ...toRefs(data),
                handleDelete
            }
        }
    }
</script>

<style scoped>
.el-table{
    margin-top: 10px;
}
</style>
